<template>
 <view class="flex-row justify-center mt-33">
   <view class="section"></view>
   <view class="section ml-15"></view>
   <view class="section_2 ml-15"></view>
 </view>
 <view class="flex-col flex-1 group">
   <image
     class="image_5"
     src="https://ide.code.fun/api/image?token=65e95c3eeb5b55001133219e&name=d845d5bc2c33a9893a44c0f90a283dc8.png"
   />
   
   <image  class="image_51" src="/static/robot illustration_3.png"></image>
   
   <view class="flex-col section_3 mt-31">
     <text class="self-center text">Fast Response</text>
     <text class="self-stretch text_2">Reply faster than you think, with the light speed AI technology.</text>
     <view class="flex-col justify-start items-center self-center image-wrapper" @click="onImageWrapperClick">
       <image
         class="image_6 blink"
         src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63c3dbd55a7e3f0310bf3e4b/65e95c07eb5b550011332170/f1d84360d94c6c29153bff6c1d13cbc2.png"
       />
     </view>
   </view>
 </view>
</template>

<script>
	export default {
	  components: {},
	  props: {},
	  data() {
	    return {};
	  },
	
	 methods: {
	       onImageWrapperClick() {
	         // 跳转到下一个页面，这里需要替换为您想要跳转的页面路径
	         uni.navigateTo({
	           url: '/pages/Onboarding3/Onboarding3' // 请替换为您的页面路径
	         });
	       }
	     }
	};
</script>

<style>
	.mt-33 {
	  margin-top: 66rpx;
	}
	.ml-15 {
	  margin-left: 30rpx;
	}
	.section {
	  background-color: #a9a9a966;
	  border-radius: 50%;
	  width: 18rpx;
	  height: 18rpx;
	}
	.section_2 {
	  background-color: #2dcbd0;
	  border-radius: 10rpx;
	  width: 56rpx;
	  height: 18rpx;
	}
 .mt-31 {
   margin-top: 62rpx;
 }
 .page {
   background-color: #fafafa;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
 }
 .group {
   padding: 0 50rpx 118rpx;
   overflow-y: auto;
 }
 
 .image_5 {
   margin: 0 8rpx;
   opacity: 0.25;
   filter: blur(140rpx);
   width: 636rpx;
   height: 690rpx;
   position: relative;
 }
 
 .image_51 {
   position: absolute;
   margin: 0 8rpx;
   width: 636rpx;
   height: 690rpx;
;
 }
 .section_3 {
   padding: 88rpx 36rpx 60rpx 56rpx;
   filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
   background-image: url('https://ide.code.fun/api/image?token=65e95c3eeb5b55001133219e&name=c3b512739861af0aa59e569a12eb90da.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 .text {
   color: #323438;
   font-size: 48rpx;
   font-family: NunitoSans;
   font-weight: 700;
   line-height: 58rpx;
   text-align: center;
   width: 370rpx;
 }
 .text_2 {
   margin-top: 32rpx;
   color: #32343899;
   font-size: 32rpx;
   font-family: NunitoSans;
   line-height: 60.8rpx;
   text-align: center;
 }
 .image-wrapper {
   margin-top: 124rpx;
   padding: 40rpx 0;
   background-color: #2dcbd0;
   box-shadow: 0rpx 20rpx 73.8rpx #2dcbd033;
   border-radius: 50%;
   width: 120rpx;
 }
 .image_6 {
   width: 48.5rpx;
   height: 36rpx;
 }
 
 .blink {
     animation: blink-animation 1s infinite; /* 应用闪烁动画 */
   }
    @keyframes blink-animation {
       0% { opacity: 1; }
       50% { opacity: 0; }
       100% { opacity: 1; }
     }
</style>
